---
const { id, name, versus, class: extraClass } = Astro.props

interface Props {
  id: string
  name: string
  versus: string
  class: string
}
---

<a
  class={`boxer-card ${extraClass} inline-block transition-all w-24 sm:w-24 md:w-16 lg:w-20 xl:w-24 2xl:w-26 group relative rounded-lg duration-300 hover:scale-110 hover:shadow-lg hover:z-20 focus-visible:scale-110 focus-visible:shadow-lg focus-visible:z-20 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-theme-tickle-me-pink`}
  aria-label={`Ver perfil del boxeador ${name}`}
  href={`/luchador/${id}`}
  data-id={id}
  data-versus={versus}
>
  <div class="relative overflow-hidden rounded-lg">
    <img
      class="via-40 aspect-[900/1200] h-full w-full bg-gradient-to-t from-gray-50/40 via-gray-50/20 to-transparent object-cover transition-transform duration-500 group-hover:scale-110"
      src={`/images/fighters/cards/${id}.webp`}
      alt={`Tarjeta del boxeador ${name}`}
    />

    <div
      class="absolute inset-0 -translate-x-full bg-gradient-to-tr from-transparent via-white/20 to-transparent transition-transform duration-700 ease-in-out group-hover:translate-x-full"
    >
    </div>

    <div
      class="border-theme-tickle-me-pink/70 absolute inset-0 rounded-lg border-0 opacity-0 transition-all duration-300 group-hover:border-2 group-hover:opacity-100"
    >
    </div>
  </div>

  <div
    class="absolute inset-0 flex translate-y-2 flex-col items-center justify-end rounded-lg bg-gradient-to-t from-pink-950/90 via-pink-950/40 to-transparent p-2 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100"
  >
    <h3
      class="text-theme-tickle-me-pink text-xs font-semibold tracking-wide drop-shadow-[0_1px_2px_rgba(0,0,0,0.8)]"
    >
      {name}
    </h3>
  </div>

  <div
    class="bg-theme-tickle-me-pink absolute -bottom-1 left-1/2 h-1 w-0 -translate-x-1/2 transform rounded-t-md transition-all duration-300 group-hover:w-2/3"
  >
  </div>
</a>

<style>
  .boxer-left {
    /* clip-path: polygon(0% 0%, 95% 0%, 100% 100%, 5% 100%); */
    transform: skew(2deg);
  }

  .boxer-right {
    /* clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%); */
    transform: skew(-2deg);
  }

  @media (prefers-reduced-motion) {
    .boxer-card,
    .boxer-card:hover,
    .boxer-card img,
    .boxer-card div {
      transition: opacity 0.3s ease !important;
      transform: none !important;
    }
  }

  @keyframes pulseBorder {
    0% {
      box-shadow: 0 0 0 0 rgba(255, 20, 147, 0.7);
    }
    70% {
      box-shadow: 0 0 0 10px rgba(255, 20, 147, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(255, 20, 147, 0);
    }
  }

  @keyframes selectedPulse {
    0% {
      box-shadow:
        0 0 0 0 rgba(255, 20, 147, 0.7),
        inset 0 0 0 2px rgba(255, 20, 147, 1);
    }
    70% {
      box-shadow:
        0 0 0 15px rgba(255, 20, 147, 0),
        inset 0 0 0 2px rgba(255, 20, 147, 1);
    }
    100% {
      box-shadow:
        0 0 0 0 rgba(255, 20, 147, 0),
        inset 0 0 0 2px rgba(255, 20, 147, 1);
    }
  }

  .boxer-card.selected {
    animation: selectedPulse 2s infinite cubic-bezier(0.66, 0, 0, 1);
  }

  @media (prefers-reduced-motion) {
    .boxer-card.selected {
      animation: none;
      box-shadow: inset 0 0 0 2px rgba(255, 20, 147, 1);
    }
  }
</style>

<script>
  document.addEventListener('astro:page-load', () => {
    const boxerCards = document.querySelectorAll('.boxer-card')
    let timeoutId: ReturnType<typeof setTimeout> | null = null
    let versusCard: HTMLAnchorElement | null = null
    let versusCardDiv: HTMLDivElement | null = null

    boxerCards.forEach((singleBoxerCard, index) => {
      singleBoxerCard.addEventListener('mouseenter', () => {
        if (timeoutId) {
          clearTimeout(timeoutId)
          timeoutId = null
        }

        const id = singleBoxerCard.getAttribute('data-id')
        if (id) {
          // Dispatch a custom event to notify a boxer card id is hovered
          const event = new CustomEvent('boxer-card-hovered', {
            detail: { id },
          })
          document.dispatchEvent(event)
        }
        // Aplicar la clase 'grayscale-100' a todas las tarjetas
        boxerCards.forEach((card) => card.classList.add('grayscale-100', 'opacity-40'))

        // Quitar la clase solo de la tarjeta sobre la que se está haciendo hover
        singleBoxerCard.classList.remove('grayscale-100', 'opacity-40')

        // Quitar la clase también de su par si existe
        const versus = singleBoxerCard.getAttribute('data-versus')
        if (versus) {
          versusCard = document.querySelector(`[data-id=${versus}]`) as HTMLAnchorElement

          versusCardDiv = versusCard.children[1] as HTMLDivElement

          versusCardDiv.classList.remove('translate-y-2')
          versusCardDiv.classList.add('opacity-100', 'translate-y-0')

          versusCard.classList.remove('grayscale-100', 'opacity-40')
          versusCard.classList.add('shadow-lg')

          versusCard.children[0].children[2].classList.add('border-2', 'opacity-100')
          versusCard.children[0].children[1].classList.add('translate-x-full')
          versusCard.children[0].children[0].classList.add('scale-110')

          versusCard.children[2].classList.add('w-2/3')
          // select the second div inside the versusCard
        }
      })

      singleBoxerCard.addEventListener('mouseleave', () => {
        timeoutId = setTimeout(() => {
          const event = new CustomEvent('boxer-card-exit')
          document.dispatchEvent(event)
        }, 500)

        // Restaurar la clase en todas las tarjetas cuando el mouse salga
        boxerCards.forEach((card) => card.classList.remove('grayscale-100', 'opacity-40'))
        // Quitar la clase de la tarjeta versus si existe
        if (versusCard) {
          versusCard.classList.remove('shadow-lg')
          versusCardDiv?.classList.remove('opacity-100', 'translate-y-0')
          versusCardDiv?.classList.add('translate-y-2')

          versusCard.children[0].children[2].classList.remove('border-2', 'opacity-100')
          versusCard.children[0].children[1].classList.remove('translate-x-full')
          versusCard.children[0].children[0].classList.remove('scale-110')
          versusCard.children[2].classList.remove('w-2/3')

          versusCardDiv = null
          versusCard = null
        }
      })

      singleBoxerCard.addEventListener('focus', () => {
        const id = singleBoxerCard.getAttribute('data-id')
        if (id) {
          const event = new CustomEvent('boxer-card-hovered', {
            detail: { id },
          })
          document.dispatchEvent(event)
        }
      })

      singleBoxerCard.addEventListener('blur', () => {
        timeoutId = setTimeout(() => {
          const event = new CustomEvent('boxer-card-exit')
          document.dispatchEvent(event)
        }, 500)
      })
    })

    function createParticles(element: HTMLElement) {
      for (let i = 0; i < 10; i++) {
        const particle = document.createElement('div')
        particle.className = 'absolute w-1 h-1 bg-theme-tickle-me-pink rounded-full'

        // Posición aleatoria alrededor de la tarjeta
        const angle = Math.random() * Math.PI * 2
        const radius = 50 + Math.random() * 20

        particle.style.left = `${50 + Math.cos(angle) * radius}%`
        particle.style.top = `${50 + Math.sin(angle) * radius}%`

        element.appendChild(particle)

        // Animación
        particle.animate(
          [
            { opacity: 1, transform: 'scale(1)' },
            { opacity: 0, transform: 'scale(0)' },
          ],
          {
            duration: 1000,
            fill: 'forwards',
          },
        ).onfinish = () => particle.remove()
      }
    }

    boxerCards.forEach((card) => {
      card.addEventListener('mouseenter', () => {
        createParticles(card as HTMLElement)
      })
    })
  })
</script>
